<template>
  <el-main>
    <div class="app-main" style="width:1200px">
            <el-row :gutter="20">
            <el-col :span="5">
             <el-table
                :data="list"
                border
                :highlight-current-row="true"
                :height="tableHeight"
                @row-click="sendcaseId">
             <el-table-column 
             label="有书签的案件"
             :show-overflow-tooltip="true">
            <template slot-scope="{ row,$index}">
                  <div class="caseList" >
                  <el-link :ref="'linkClick'+$index" :underline="false" > {{row.case_name+"（共"+row.total_num+"条）"}}</el-link>
                </div>
            <!-- <el-row >
            <el-col :span="24">
            
            </el-col> -->
            <!-- <el-col :span="2">
                <div class="iconright" style="color:#ffffff">
                   <i  class="el-icon-d-arrow-right"></i>
                </div>
            </el-col> 
           </el-row>-->
            </template>
        </el-table-column >
             </el-table>
            </el-col>
            <el-col :span="19">
          <el-table 
            ref="recordTable"
            :key="0"
            stripe
            :data="evidencelist"
            :height="tableHeight"
            @selection-change="handleSelectionChange"
          >
          <!-- @row-click="senddetail" -->
          <el-table-column
            type="selection"
            width="45"
          >
          </el-table-column>
            <el-table-column  scoped-slot>
               <template slot="header">
                 <div class="headerContent">
                   <div class="headerLeft">
                     {{labelname}}
                   </div>
                  <div class="headerRight">
                         <el-button class="operation" :disabled='disabled' type="primary" size="mini" @click="openCreateMark(null)">
                批量转为线索
               </el-button>
                  </div>
                 </div>
               </template>
              <template slot-scope="{ row }">
                <el-row style="display:flex;justify-content:center;align-items: center;">
                  <el-col :span="3" >
                   <div class="showimg">
                          <div v-show="row.evidence_status==='已失败'">
                          <div class="imgdata"><svg-icon icon-class="imagefail"></svg-icon></div>
                          <div style="width:80px;margin:auto"><span style="font-size:12px">图片爬取失败</span></div>
                         </div >
                    <div  v-show="row.evidence_status==='进行中'">
                          <div class="imgdata" > <svg-icon icon-class="imageloading"></svg-icon></div>
                          <div style="width:80px;margin:auto"><span style="font-size:12px">图片正在爬取</span></div>
                    </div >
                    <div  v-show="row.evidence_status==='已成功'" >
                      <div class="imgdata"  ><img :src="row.thumbnail_img" height="100" width="80" /></div>
                    </div>
                   </div>
                  </el-col>
                  <el-col :span="21">
                    <div class="msgdata">
                      <el-row>
                        <el-col  :span="22">
                         <div>
                          <p class="title_p">
                          <router-link target="_blank" @click.native="senddetail(row)" :to="{ name: 'Detail'}">
                             <span style="font-size:16px;font-weight: bold;padding-right:5px;color:#222222">{{ row.title }}</span>
                         </router-link>
                          </p>
                        </div>
                        </el-col>
                        <el-col :span="2">
                               <el-button class="bookmark" style="font-size:15px" size="small" type="text"  @click="openCreateMark(row)" >
                                转为线索
                               </el-button>
                        </el-col>
                      </el-row>
                      <div class="line_creater">
                          <label style="padding-right:5px">由</label>
                          <span style="color: #666666;">{{ row.evidence_creater }}</span>
                          <label style="padding:0 5px">创建于</label>
                          <span style="color: #666666;margin-right:10px">{{ row.start_time  | parseTime}}</span>
                              <el-tag
                               style="font-size:15px"         
                          :type="row.evidence_status | statusFilter" >
                          {{ row.evidence_status }}
                        </el-tag>
                      </div>
                      <div class="line_link">
                        <div class="link" style="width: 70% ;margin:auto 0">
                              <!-- <label style="margin-right:15px" >网址:</label> -->
                         <el-tooltip
                            class="item"
                            effect="dark"
                            :content="row.url"
                            placement="top"
                          >
                            <el-link  :href="row.url" :underline="false"  target="_blank">{{
                              row.url
                            }}</el-link>
                          </el-tooltip>
                        </div>
                        <div style="padding-right: 30px;color:#000000">   
                           <!-- <div><el-checkbox></el-checkbox></div> -->
                          <div>更新于<span style="color:#000000">{{ row.update_time | formatTime}}</span></div>
                        </div>
                      </div>
                    </div>
                    </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
            </el-col>
            </el-row>
            <!-- <markDialog @cancel="cancel" v-if="dialogFormVisibleT" :markbook="markbook" :dialogFormVisibleT="dialogFormVisibleT"></markDialog> -->
            <create-mark @cancelCreateMark="cancelCreateMark" :marks="marks" v-if="createMarkVisibleT" :createMarkVisibleT="createMarkVisibleT"></create-mark>
    </div>
  </el-main>
</template>
<script>
import{ fetchmark,fetchmarkNull} from '@/api/evidence'
import {formatTime,parseTime} from "@/utils/index";
import createMark from '@/views/bookmark/createMark.vue';
export default {
  components: { createMark },
   filters: {
    statusFilter(status) {
      const statusMap = {
        已成功: "success",
        进行中: "info",
        已失败: "danger",
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
    formatTime(t){
         let time=t.toString().substr(0,10)
         return formatTime(time,true)
    },
    parseTime(val){
     let valtime= val.toString().substr(0,10)
      return  parseTime(valtime)
    },
     //formatTime: formatTime,
  },
    data(){
       return{
         disabled:true,
          labelname:'留证书签',
          list:[],
          cluelist:[],
          evidencelist:[],
          case_id:null,
          tableHeight:null,
          isloading: false,
          listQuery: {
          page: 1,
          page_size: 20,
          case_status:"进行中"
      },
        markbook:"",      
        dialogFormVisibleT:false,
        marks:[],
        createMarkVisibleT:false,
       }
    },
    created(){
      this.getlist();
    },
       mounted() {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.tableHeight =
        window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () => {
          this.tableHeight =
          window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      };
      setTimeout(()=>{
      this.$refs['linkClick0'].$el.click()
      // console.log(document.getElementsByClassName("linkClick0"))
      // document.getElementsByClassName("linkClick0")[0].click();
      },800)
    });
    
  },
    methods:{
    openCreateMark(val){
        if(val!=null){
          this.marks.push(val);
        }else{
            this.marks=this.cluelist;
        }
     
        this.createMarkVisibleT=true;
    },
    cancelCreateMark(){
      this.marks=[];
      this.createMarkVisibleT=false;
    },
      getlist(){
         fetchmarkNull().then((Response)=>{
          // console.log(Response)
             for(let i in Response.data.list){
                 this.list.push(JSON.parse(JSON.stringify(Response.data.list[i])))
             }
         }).catch((error)=>{
          console.log(error);
         })
     },
    getevidencelist(){
      fetchmark(this.case_id).then((response)=>{
           for(let i in response.data.list){
               this.evidencelist.push(JSON.parse(JSON.stringify(response.data.list[i])))
                   // console.log(this.case_id)
           }
      })
      this.labelname="留证书签"
    },
       sendcaseId(row){
        this.case_id=row.case_id;
       // console.log(this.case_id)
       this.$nextTick(()=>{
         this.evidencelist=[];
            this.getevidencelist()
       })
         
      },
      senddetail(row){
     //console.log(row)
      // this.$router.push({name:'Detail',params:{rowkey:row}})
        localStorage.setItem("rowkey",JSON.stringify(row))
    },
    handleSelectionChange(val) {
      this.disabled=false;
      this.cluelist=val
      this.labelname="共选中"+val.length+"条留证书签"
        // this.multipleSelection = val;
      }
    },
   
   load() {
      // this.isloading = true
      // noMore 没有更多
      // isloading   正在加载
      if (this.list.length >= this.tot) {
        this.isloading = false;
        // this.noMore = true
      } else if (
        this.list.length ==
        this.listQuery.page * this.listQuery.page_size
      ) {
        this.listQuery.page++;
        this.getList();
      }
      // this.isloading = false
    },
  
}
</script>

<style lang="scss" scoped>
.el-main{
      display: flex;
      align-items: center;
      justify-content: center;
}
  .app-main{
      height:calc(100vh - 90px); 
  }
  .line_link {
  display: flex;
  width: 100%;
  justify-content: space-between;
   margin: 10px  0 0 0;
}

.imgdata {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 80px;
}
.deleteBorder ::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
  background: #fff;
}
.marktabs{
  margin-left: 40px;
}
.line_creater {
  width: 100%;
  margin-top: 10px;

}
.el-link {
  width: 80%;
  height:19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  align-items: center;
}
 ::v-deep .el-table__body tr.current-row>td i{
  // background-color: rgb(107, 221, 150)!important;
  color: rgb(238, 32, 32);
  
}
.showimg{
  height: 100%;
  widows: 100%;
  span{
   padding: auto;
  }
}
.title_p{
  //position: relative;
  margin: 0;
  font-size: 16px;
  color: #333;
  span {
    font-size: 16px;
    font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
  }
}
.bookmark{
  padding: 0px;
}
.operation{
  font-size: 16px;
}
.headerContent{
  display: flex;
  justify-content: space-between;
  align-content: center;
}
::v-deep .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar{
  position: relative;
  // display: none;
    // overflow-y: auto;
     background-color: rgba(40, 44, 52, 0.1);
    border: 3px solid transparent;
     border-radius: 7px;
    width: 8px;
    height: 8px;
}
// ::v-deep .el-table th > .cell {
//       text-align: center;

//     }

//     ::v-deep .el-table .cell {
//       text-align: center;

//     }

</style>>

